<template>
    <div class="map-box">
        <div class="history-head">
            <div class="returnBtn">
                <button type="button" @click="returnMap">返回</button>
            </div>
            <div class="date-content">
                <input type="text" class="date_input start_time" v-model="selectTime.beginTime" readonly>
                <date-pick v-if="DPStatus.BEGINDatePickStatus" @node-click="getDate"></date-pick>
                <div class="img_box">
                    <img src="../../assets/images/reports_image/mileage_selected-.png" alt="选择时间" class="noHide"
                         @click="updateDPStatus('BEGINDatePickStatus')">
                </div>
            </div>
            至
            <div class="date-content">
                <input type="text" class="date_input end_time" v-model="selectTime.endTime" readonly>
                <div class="img_box">
                    <img src="../../assets/images/reports_image/mileage_selected-.png" alt="选择时间" class="noHide"
                         @click="updateDPStatus('ENDDatePickStatus')">
                </div>
                <date-pick v-if="DPStatus.ENDDatePickStatus" @node-click="getDate"></date-pick>
            </div>
            <ul class="btns">
                <li><span class="play" :class="{pause: isPause, noPlay: isPlay}" @click="playOrPause"></span></li>
                <li>
                    <button type="button" class="reset" :class="{disabled: isDisabled}" :disabled="isDisabled"
                            @click="reset">复位
                    </button>
                </li>
                <li class="speedLabel">速度</li>
                <li class="speed">
                    <p @click="speed">
                        <b id="speedRuler"></b>
                    </p>
                </li>
            </ul>
        </div>
        <history-baidu v-if="from === 'baidu'" :imei="imei" ref="baiduMap" @fromMap="setBtn"></history-baidu>
        <history-google v-else-if="from === 'google'" :imei="imei" @fromMap="setBtn" ref="googleMap"></history-google>
    </div>
</template>

<script>
    import historyBaidu from './historyBaidu'      //引入百度地图组件
    import historyGoogle from './historyGoogle'    //引入谷歌地图组件
    import datePick from '@/base/DatePick'         //引入日期选择器组件

    export default {
        components: {
            historyBaidu,
            historyGoogle,
            datePick
        },
        data () {
            return {
                from: '',
                imei: '',
                selectTime: {
                    beginTime: '',
                    endTime: ''
                },
                DPStatus: {
                    BEGINDatePickStatus: false, //开始日期选择器的状态
                    ENDDatePickStatus: false    //结束日期选择器的状态
                },
                rulerLeft: 0,
                isDisabled: true,   // 控制复位按钮是否可用 {true: 不可用}
                isPause: false,     // 控制是否暂停        {true: 暂停}
                isPlay: false       // 控制播放按钮是否可用 {true: 不可用}
            }
        },
        methods: {
            updateDPStatus (params) {
                for (let key in this.DPStatus) {
                    if (this.DPStatus.hasOwnProperty(key)) {
                        this.DPStatus[key] = false
                    }
                }
                this.DPStatus[params] = true
            },
            getDate (date) {
                if (date === '') {
                    for (let key in this.DPStatus) {
                        if (this.DPStatus.hasOwnProperty(key)) {
                            this.DPStatus[key] = false
                        }
                    }
                    return
                }
                if (this.DPStatus.BEGINDatePickStatus) {
                    this.selectTime.beginTime = date
                } else {
                    this.selectTime.endTime = date
                }
                for (let key in this.DPStatus) {
                    if (this.DPStatus.hasOwnProperty(key)) {
                        this.DPStatus[key] = false
                    }
                }
                let params = {
                    imei: this.imei,
                    beginDate: this.selectTime.beginTime,
                    endDate: this.selectTime.endTime
                }
                this.$ajax
                    .equip
                    .queryEquipHistory(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            let baidu = this.$refs.baiduMap
                            let google = this.$refs.googleMap
                            if (baidu) {
                                baidu.getTrail(result.result)
                            }
                            if (google) {
                                google.getTrail(result.result)
                            }
                        } else if (result.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(() => {
                                clearTimeout(timer)
                                $('#msgModal').modal('hide')
                                this.$router.push({path: '/login'})
                            }, 2000)
                        } else {
                            this.$store.commit('showAlert', {error: result.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            },
            returnMap () {
                this.$router.push({path: '/monitoring'})
            },
            speed (e) {
                let el = e.target
                if (el.id === 'speedRuler') {
                    return
                }
                let ruler = document.getElementById('speedRuler')
                ruler.style.left = e.layerX + 'px'
                let baidu = this.$refs.baiduMap
                let google = this.$refs.googleMap
                if (baidu) {
                    baidu.getSpeed(e.layerX)
                }
                if (google) {
                    google.getSpeed(e.layerX)
                }
            },
            playOrPause () {
                if (this.isPlay) {
                    return
                }
                this.isPause = !this.isPause
                this.isDisabled = false
                let baidu = this.$refs.baiduMap
                let google = this.$refs.googleMap
                if (baidu) {
                    if (!this.isPause) {
                        baidu.pause()
                    } else {
                        baidu.play()
                    }
                }
                if (google) {
                    if (!this.isPause) {
                        google.pause()
                    } else {
                        google.play()
                    }
                }
            },
            reset () {
                let baidu = this.$refs.baiduMap
                let google = this.$refs.googleMap
                if (baidu) {
                    baidu.reset()
                }
                if (google) {
                    google.reset()
                }
            },
            setBtn (data) {
                if (data === 'reset') {
                    this.isDisabled = true
                    this.isPause = false
                    this.isPlay = false
                }
                if (data === 'playOver') {
                    this.isDisabled = false
                    this.isPause = false
                    this.isPlay = true
                }
            },
            // 隐藏时间选择器
            hideDatePicker (e) {
                if (!$(e.target).hasClass('noHide') && !$(e.target).parents().hasClass('noHide')) {
                    for (let key in this.DPStatus) {
                        if (this.DPStatus.hasOwnProperty(key)) {
                            this.DPStatus[key] = false
                        }
                    }
                }
            },
        },
        mounted () {
            let params = this.$route.query.key
            if (params.from === undefined) {
                this.$router.push({path: '/monitoring'})
                return
            }
            this.from = params.from
            this.imei = params.imei
            let today = new Date()
            let year = today.getFullYear()
            let month = today.getMonth() + 1 > 9 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1)
            let date = today.getDate() > 9 ? today.getDate() : '0' + today.getDate()
            let hour = today.getHours() > 9 ? today.getHours() : '0' + today.getHours()
            let min = today.getMinutes() > 9 ? today.getMinutes() : '0' + today.getMinutes()
            let second = today.getSeconds() > 9 ? today.getSeconds() : '0' + today.getSeconds()
            this.selectTime.beginTime = `${year}-${month}-${date} ${hour}:${min}:${second}`
            this.selectTime.endTime = `${year}-${month}-${date} ${hour}:${min}:${second}`
            this.$globalClick(this.hideDatePicker)
        }
    }
</script>

<style scoped>
    .map-box {
        height: 100vh;
    }

    .history-head {
        height: 7vh;
        background: #e9f6f2;
        line-height: 7vh;
        padding-left: 1rem;
    }

    .returnBtn {
        display: inline-block;
        line-height: normal;
    }

    .returnBtn button {
        border-radius: 4px;
        border: 0;
        background: #17D29C;
        padding: 4px 10px;
        color: #fff;
        margin-right: 40px;
    }

    .date-content {
        display: inline-block;
        position: relative;
        padding: 0 0.1rem;
        height: 0.36rem;
        border: 1px solid #ccc;
        border-radius: 25px;
        line-height: 0.36rem;
    }

    .date_input {
        border: none;
        background: transparent;
    }

    .img_box {
        position: absolute;
        top: 0;
        right: 0.15rem;
    }

    .img_box img {
        cursor: pointer;
    }

    .btns {
        list-style: none;
        display: inline-block;
        width: 30%;
        line-height: 0.4rem;
        margin: 0;
        padding: 0;
        margin-left: 0.5rem;
    }

    .btns li {
        display: inline-block;
        height: 100%;
        line-height: 100%;
        box-sizing: border-box;
        margin-right: 0.5rem;
    }

    .btns li.speedLabel {
        margin-right: 0;
    }

    .btns li.speed {
        width: 100px;
        line-height: 100%;
    }

    .btns li.speed p {
        position: relative;
        margin: 0;
        height: 6px;
        width: 100px;
        border-radius: 4px;
        background: #D9D1D1 url("../../assets/images/position_image/speed.png") no-repeat;
    }

    .btns li.speed b {
        padding-left: 5px;
        padding-top: 13px;
        position: absolute;
        top: -0.03rem;
        left: 48px;
        background: url("../../assets/images/position_image/ruler.png") no-repeat;
    }

    .btns li span {
        padding-left: 20px;
        padding-top: 25px;
        display: inline-block;
        margin-bottom: -5px;
        cursor: pointer;
    }

    .btns li span.play {
        background: url("../../assets/images/position_image/play.png") no-repeat;
    }

    .btns li span.pause {
        background: url("../../assets/images/position_image/pause.png") no-repeat;
    }

    .btns li span.noPlay {
        background: url("../../assets/images/position_image/play_unavailabel.png") no-repeat;
        cursor: default;
    }

    .btns li .reset {
        width: auto;
        height: 26px;
        border-radius: 10px;
        background: #E9F6F2;
        border: 1px solid #17D29C;
        color: #666;
        outline: none;
    }

    .btns li .reset.disabled {
        border-color: #ccc;
        color: #ccc;
    }
</style>
